<template>
  <div ref="chartRef" class="chart"></div>
</template>

<script setup>
import { ref, onMounted,computed,defineExpose } from "vue";
import { useECharts } from "@pureadmin/utils";
import { codeClean } from '@/api/dataProcessing'

const fileName = ref("");
const c_way = ref(1);
const chartYName = ref("齿轮振动传感器加速度数据");
const fileDataObj = ref('');
const childStatusObj = ref({
  title: '未清洗',
  status: 500
});

const emit = defineEmits(['childTitleStatusClick']);
emit('childTitleStatusClick', childStatusObj.value)

const props = defineProps({
  fileData: {
    type: String,
    default: ''
  },
  fileName: {
    type: String,
    default: ''
  },
  selectValue: {
    type: Object,
    default () {
      return {}
    }
  },
  switchValue: {
    type: Array,
    default() {
      return []
    }
  }
});

fileName.value = props.fileName;
// base64格式转file对象
const base64ToFile = (base64, fileName) => {
  let arr = base64.split(",");
  // let mime = arr[0].match(/:(.\*?);/)[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);

  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], fileName, { type: '' });
}
fileDataObj.value = base64ToFile(props.fileData, props.fileName)

onMounted(() => {
  render();
});

const chartRef = ref();
const chartData = ref([
  {
    data: [120, 132, 101, 134, 90, 230, 210],
    name: '原始数据'
  },
  {
    data: [220, 182, 191, 234, 290, 330, 310],
    name: '修复数据'
  }
])
const { setOptions, resize } = useECharts(chartRef, {});
const render = () =>
  setOptions({
    // color: ["rgb(12, 120, 225)", "rgb(255, 153, 0)"],
    title: {
      // text: '随便填写',
      top: "5%",
      textStyle: {
        fontSize: 16
      }
    },
    tooltip: {
      trigger: "axis"
    },
    legend: {
      right: "15%",
      data: ["原始数据", "修复数据"],
      icon: "roundRect",
      top: "5%",
      textStyle: {
        fontSize: 14
      }
    },
    grid: {
      top: "20%",
      left: "0%",
      right: "10%",
      bottom: "10%",
      containLabel: true
    },
    toolbox: {
      feature: {}
    },
    xAxis: {
      axisTick: {
        show: false
      },
      axisLabel: {
        margin: 15 // 调整刻度标签和坐标轴名称之间的间距
      },
      name: '数量',
      nameTextStyle: {
        color: "#303133",
        fontSize: 14,
        padding: [35, 0, 0, -45],
        verticalAlign: "top"
      },
      type: "category",
      boundaryGap: true,
      // data: ["1", "2", "3", "4", "5", "6", "7", "8"]
    },
    yAxis: {
      name: chartYName.value,
      type: "value",
      nameRotate: 0.1
    },
    series: [
      {
        name: '原始数据',
        type: "line",
        data: chartData.value[0].data,
        symbol: "none", // 设置标记点形状为无
        showSymbol: false, // 不显示标记点
        // lineStyle: {
        //   shadowBlur: 5,
        //   shadowColor: "rgba(12, 120, 225, 0.5)",
        //   shadowOffsetY: 3
        // }
      },
      {
        name: '修复数据',
        type: "line",
        data: chartData.value[1].data,
        symbol: "none", // 设置标记点形状为无
        showSymbol: false, // 不显示标记点
        // lineStyle: {
        //   shadowBlur: 5,
        //   shadowColor: "rgba(255, 153, 0, 0.5)",
        //   shadowOffsetY: 3
        // }
      }
    ]
  });
  const changeYName = () => {
    if (c_way.value == 1) {
      if (fileName.value.split('.')[1] === "mat") {
        chartYName.value = "齿轮振动传感器加速度数据"
      }else if (fileName.value.split('.')[1] === "xlsx") {
        chartYName.value = "主轴转速数据"
      }
    }else if (c_way.value == 0) {
      chartYName.value = "主轴转速"
    }
  }

  // 开始清洗
  const childMethod = () => {
    chartData.value[0] = {}
    chartData.value[1] = {}
    if (fileDataObj.value) {
      changeYName();
      childStatusObj.value.title = '清洗中....';
      emit('childTitleStatusClick', childStatusObj.value)
      let formData = new FormData()
      formData.append("type", props.selectValue.selectA)
      formData.append("file", fileDataObj.value)

      codeClean(formData).then(res => {
        if (res.status === 200) {
          chartData.value[0].data = res.data.oridata;
          chartData.value[1].data = res.data.prodata;
          render();
          if (res.data.oridata.length > 0) {
            childStatusObj.value.title = "清洗完成"
            childStatusObj.value.status = res.status;
          }
        } else {
          childStatusObj.value.title = '清洗失败';
          childStatusObj.value.status = res.status;
        }
      }).catch(error => {
        childStatusObj.value.title = '清洗失败';
        childStatusObj.value.status = error.status;
        console.log(error)
      }).finally(() => {
        emit('childTitleStatusClick', childStatusObj.value)
      })
    }
  }

  defineExpose({
    childMethod
  })

//计算属性
// const tagType = computed(() => {
//   if (c_status.value ==='未清洗') {
//       return 'danger'
//   }
//   else if (c_status.value ==='清洗完成') {
//     return 'success'
//     }
// })
</script>

<style lang="scss" scoped>
.dataCleaning {
  .chart {
    width: 100%;
    height: 430px;
  }
}
</style>
